<template>
    <div class="comment-container">
        <h5>发表评论</h5>
        <textarea class="mytext" placeholder="请输入要评论的内容（最多200字哦！）" maxlength="200" v-model="msg"></textarea>
        <div class="span-two">
            <span class="little-space">剩余可输入<span class="num">{{ num }}</span>字</span>
            <div class="btn-com">
            <Button type="primary" @click="postComment">发表评论</Button>
            </div>
        </div>
        <!-- 评论列表 -->
        <div class="cmt-list">
            <div class="cmt-list-item" v-for="(item, i) in commentInfo" :key="i">
                <div class="item-left">
                    <img :src="item.user.uImg" alt="">
                </div>
                <div class="item-right">
                    <p class="userName">{{ item.user.uName }}</p>
                    <p class="userCmt">{{ item.tvcContent || item.vcContent || item.mcContent }}</p>
                    <span class="cmtTime"><span class="floor">第{{ i+1 }}楼</span> {{ (item.tvcTime || item.vcTime || item.mTime) | dataFormat }}</span>
                    <!-- <a class="m-1 callback" href="javascript:;">回复</a>
                    <div>
                    <textarea :placeholder="'回复 ' + item.user.uName" class="callback-text"></textarea>
                    <Button type="primary" size="small">提交</Button>
                    </div> -->
                    <a-collapse defaultActiveKey="1" :bordered="false">
                        <a-collapse-panel :showArrow="false" header="回复" :key="i">
                            <textarea :placeholder="'回复 ' + item.user.uName" class="callback-text"></textarea>
                            <Button type="primary" size="small">提交</Button>
                        </a-collapse-panel>
                    </a-collapse>
                </div>
            </div>
            <!-- <div class="cmt-list-item">
                <div class="item-left">
                    <img src="https://thirdqq.qlogo.cn/g?b=oidb&k=ZDXvgx8VicLKHlJBEr5rHTw&s=100&t=1557128964" alt="">
                </div>
                <div class="item-right">
                    <p class="userName">用户昵称</p>
                    <p class="userCmt">用户评论内容</p>
                    <div class="call-box">
                        <div class="cmtTime">时间</div>
                        <div class="callback">
                            <b-button v-b-toggle.collapse-1 variant="default" size="sm">回复</b-button>
                            <b-collapse id="collapse-1" class="mt-2">
                                <textarea></textarea>
                            </b-collapse>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            msg:'', // 评论输入的内容
            flag:false
        }
    },
    methods:{
        // 发表评论
        postComment(){
            this.$emit('func',this.msg);
            this.msg = '';
        }
    },
    computed:{
        // 剩余可输入字数
        'num':function(){
            if(this.msg.trim().length > 0){
                return parseInt(200 - this.msg.trim().length);
            }else{
                return 200;
            }
        }
    },
    props:['commentInfo'],
}
</script>

<style lang="scss" scoped>
.comment-container{
    margin-top: 1.5rem;
    h5{
        margin-bottom: 0.9rem;
    }
    .mytext{
        font-size: 14px;
        margin:0;
        height:90px;
        background-image: url('../../images/comment.gif');
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 250px 45px;
    }
    .span-two{
        display: flex;
        justify-content: space-between;
        .little-space{
            font-size: 13px;
            color:#888;
            .num{
                color: #eb2f96;
            }
        }
        .btn-com{
            margin-top: 0.5rem;
        }
    }
    .cmt-list{
        margin: 1rem 0;
        .cmt-list-item{
            display: flex;
            justify-content: flex-start;
            // border-bottom: 1px solid #d8d8d8;
            padding: 0.6rem 0;
            .item-left{
                margin-right: 0.7rem;
                img{
                    width: 45px;
                    height: 45px;
                    border-radius: 50%;
                }
            }
            .item-right{
                width: 100%;
                .userName{
                    color:#007bff;
                }
                .userCmt{
                    color:#222;
                }
                .cmtTime{
                    font-size: 13px;
                    color:#555;
                    margin-right: 0.7rem;
                    .floor{
                        margin-right: 0.6rem;
                    }
                }
                .callback{
                    font-size: 14px;
                }
                .collapse{
                    margin-top: 0.6rem;
                }
                .callback-text{
                    width: 100%;
                    font-size: 13px;
                    margin-bottom: 0px;
                }
            }
        }
    }
}
</style>